<template>
  <div id="main" style="width: 100vw;height:300px;"></div>
</template>

<script>
import * as echarts from 'echarts'
import dayjs from 'dayjs'

export default {
  name: 'EchartView',
  data () {
    return {
      dateState: '',
      ovulationList: [], // 排卵期
      menstrualList: [] // 经期
    }
  },
  props: {
    startDate: {
      type: String,
      default: ''
    },
    endDate: {
      type: String,
      default: ''
    }
  },
  created () {
    this.formatOvulation(this.endDate)
    this.formatMenstrual(this.startDate, this.endDate)
    this.$emit('dateState', this.computeDate(dayjs()))
  },
  methods: {
    // 计算排卵期
    formatOvulation (date) {
      // 计算第10天和第26天的日期
      const day10 = dayjs(date).add(10, 'day')
      const day26 = dayjs(date).add(26, 'day')
      let currentDate = day10
      // 计算经期之后的第十天到第二十六天的所有日期
      while (currentDate.isBefore(day26)) {
        this.ovulationList.push(currentDate.format('M-D'))
        currentDate = currentDate.add(1, 'day')
      }
      return this.ovulationList.map(item => {
        return {
          name: item,
          value: 1
        }
      })
    },
    // 计算经期
    formatMenstrual (startDate, endDate) {
      startDate = dayjs(startDate, 'M-D')
      endDate = dayjs(endDate, 'M-D').endOf('day')
      let currentDate = endDate
      // 计算经期之后的第十天到第二十六天的所有日期
      while (currentDate.isAfter(startDate)) {
        this.menstrualList.unshift(currentDate.format('M-D'))
        currentDate = currentDate.subtract(1, 'day')
      }
      return this.menstrualList.map(item => {
        return {
          name: item,
          value: 1
        }
      })
    },
    // 计算今天属于哪个期
    computeDate (date) {
      const checkDate = dayjs(date).format('M-D')

      // 查询元素在第一个数组中的索引
      const indexInArr1 = this.ovulationList.indexOf(checkDate)
      if (indexInArr1 !== -1) { // 如果找到了
        return '排卵期'
      } else { // 否则，在第二个数组中查询
        const indexInArr2 = this.menstrualList.indexOf(checkDate)
        if (indexInArr2 !== -1) { // 如果找到了
          return '经期'
        } else { // 否则，未找到
          return '安全期'
        }
      }
    }
  },
  mounted () {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('main'))

    // 指定图表的配置项和数据
    myChart.setOption({
      // color: ['#dc6068', '#5d9cec', '#a893e5', '#de8cbd'],
      series: {
        type: 'sunburst',
        emphasis: {
          focus: 'ancestor'
        },
        data: [
          {
            name: '经期',
            value: this.menstrualList.length,
            children: this.formatMenstrual(this.startDate, this.endDate)
          },
          {
            name: '排卵期',
            value: this.ovulationList.length,
            children: this.formatOvulation(this.endDate)
          }
        ],
        // data: this.renderDataList,
        levels: [
          {},
          {
            r0: '10%',
            r: '50%',
            itemStyle: {
              borderWidth: 2
            },
            label: {
              rotate: false,
              color: '#fff',
              fontSize: 10
            }
          },
          {
            r0: '52%',
            r: '95%',
            itemStyle: {
              borderWidth: 2,
              borderRadius: 10
              // opacity:0
            },
            label: {
              align: 'center',
              color: '#fff',
              rotate: false,
              fontSize: 10
            }
          }
        ]
      }
    })
  }
}
</script>

<style scoped>
#main {
  /*font-size: 9px;*/
}
</style>
